<template>
	<div class="home">
		<!-- 轮播图 -->
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item
				v-if="banner.length > 0"
				v-for="item in banner"
				:key="item.img"
				class="banner-item"
			>
				<van-image class="items" fit="contain" :src="item.img" />
			</van-swipe-item>
		</van-swipe>
		<!-- 分类图标 -->
		<van-grid :column-num="3" square :border="false" class="category">
			<van-grid-item v-for="item in category" :key="item.text" :to="item.to">
				<template name="icon">
					<van-image class="items" fit="contain" :src="item.icon" />
				</template>
				<template name="text">
					{{ item.text }}
				</template>
			</van-grid-item>
		</van-grid>
	</div>
</template>

<script>
import { getBanner } from '@/apis/index.js';
export default {
	async created() {
		// 轮播图
		this.banner = (await getBanner()).data.message;
	},
	data() {
		return {
			banner: [],
			category: [
				{
					text: '新闻资讯',
					icon: require('@/assets/images/menu3.png'),
					to: '/postlist'
				},
				{
					text: '图片分享',
					icon: require('@/assets/images/menu4.png'),
					to: '/share'
				},
				{
					text: '商品展示',
					icon: require('@/assets/images/menu5.png'),
					to: '/goods'
				},
				{
					text: '留言反馈',
					icon: require('@/assets/images/menu6.png'),
					to: '/member'
				},
				{
					text: '搜索资讯',
					icon: require('@/assets/images/menu9.png'),
					to: '/search'
				},
				{
					text: '联系我们',
					icon: require('@/assets/images/loading.png'),
					to: '/car'
				}
			]
		};
	}
};
</script>

<style lang="less" scoped>
.banner() {
	width: 100vw;
	height: 205px;
}
.my-swipe {
	margin: 5px 0;
	.banner-item,
	.banner-item .items {
		.banner;
	}
}
.category {
	.items {
		width: 50px;
		height: 50px;
		margin-bottom: 15px;
	}
}
</style>
